<template>
  <div class="package-tab-box" id="buildpackageoptions">
    <el-tabs v-model="activeName" tab-position="left" class="package-tab" @tab-click="changeActiveOption">
      <el-tab-pane class="package-tab-box__item" v-for="option in listOptions" :key="option.id" :lazy="true"
        :id="option.id" :label="option.label" :name="option.id">
        <div class="nav-content" v-if="$route.name === option.id">
          <router-view></router-view>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script scoped>
import packagingUtil from "../packagingUtil.js";
export default {
  name: "Nav",
  components: {},
  data() {
    return {
      listOptions: [
        { id: "baseInfo", label: "基本信息" },
        { id: "protect", label: "保护设置" },
        { id: "installPage", label: "安装界面" },
        //{id:'upgradePage',label:'升级界面'},
        { id: "packageManagement", label: "包管理" },
        //{id:'packageLogs',label:'打包日志'}
      ],
    };
  },

  methods: {
    changeActiveOption(tab) {
      var id = tab.$attrs.id;
      this.$store.commit("changeActiveOption", id);
      this.$store.commit("changeActivePageIndex", 0);
      this.$router.push("/nav/" + id);
      if (this.$store.state.activeOption == "packageManagement") {
        var queryParams = this.$store.state.packageQueryParams;
        queryParams.bq = "";
        this.$store.commit("updatePackageQueryParams", queryParams);
        this.$store.dispatch("getPackagesAction", this);
      } else if (this.$store.state.activeOption == "packageLogs") {
        this.$store.dispatch("getPackageLogsAction", this);
      }
    },
  },
  mounted() {
    // 获取根元素
    const root = document.documentElement;
    const skin = packagingUtil.getUrlStr("skin")
    const color = packagingUtil.currentBackground(skin)
    // 更新变量值
    root.style.setProperty('--main-color', color);

  },
  computed: {
    getActiveOption() {
      return this.$store.state.activeOption;
    },
    getSkin() {
      return "skin_" + packagingUtil.getUrlStr("skin");
    },

    activeName: {
      get() {
        return this.$store.state.activeOption
      },
      set(val) {
        this.$store.commit('changeActiveOption', val)
      }
    }
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

/*导航页*/
.nav-ul {
  width: 180px;
  height: calc(100vh - 40px);
  float: left;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);
  padding-top: 40px;
}

.nav-li {
  width: 100%;
  list-style: none;
  color: rgba(255, 254, 254, 0.4);
}

.nav-li a {
  width: 80%;
  line-height: 68px;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  /*border-bottom: 1px solid #ebebeb;*/
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.activeOptiton {
  color: #fffefe;
  border-bottom: 1px solid #ebebeb;
}

.nav-content {
  width: calc(100% - 20px);
  height: 100%;
  float: left;
  /*padding-top:80px;*/
  /*padding-left:120px;*/
}

.package-tab-box__item {
  height: 100%;
}

.package-tab-box {
  margin: 10px;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  height: -webkit-calc(100% - 20px);
  height: calc(100% - 20px);
}

.package-tab {
  height: 100%;
}

.package-tab .el-tabs__item {
  text-align: left !important;
}

.package-tab .is-left .el-tabs__item:hover,
.package-tab .is-left .el-tabs__item.is-active {
  background-color: #ebeef5;
}

.package-tab .el-tabs__item:hover {
  color: var(--main-color);

}

.package-tab .el-tabs__item.is-active {
  color: var(--main-color);
}

.package-tab .el-tabs__content {
  height: 100%;
  overflow: auto;
}

.package-tab .el-tabs__active-bar {
  background-color: var(--main-color);
}

.package-tab {

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-radio__input.is-checked .el-radio__inner {
    border-color: var(--main-color);
    background: var(--main-color);
  }

  .el-radio__inner:hover,
  .el-checkbox__inner:hover {
    border-color: var(--main-color);
  }

  .el-menu-item.is-active {
    color: var(--main-color) !important;
  }
}

.el-button--primary,
.el-button--primary:focus,
.el-button--primary:hover {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
}
</style>
